<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>07输入框和导航组件</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
        .a{
            height: 50px;
            width: 200px;
            border: 1px solid #ccc;
            background-color: #eee;
        }
    </style>
</head>

<body>

    <!-- 文本输入框就是可以在input元素前后加上文字或按钮  可以实现对表单空间的扩展 -->
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control">
    </div>
    <br/>
   <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-addon">163.com</span>
    </div>
    <br/>    
    <!-- 在两侧添加文字 -->
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">.00</span>
    </div>
    <br/>
    <!-- 右侧使用按钮 -->
    <div class="input-group">
         <input type="text" class="form-control">
         <div class="input-group-btn">
             <button class="btn btn-default">提交</button>
         </div>
    </div>

    <br/>
    <!-- 左侧使用下拉菜单或分列式 -->
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn">
            <button  class="btn btn-default">下拉菜单</button>    
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-header">网站标题</li>
                <li><a href="#">首页</a></li>
                <li><a href="#">资讯</a></li>
                <li class="divider"><a href="#">产品</a></li>
                <li class="disabled"><a href="#">关于</a></li>
            </ul>
        </div>
    </div>

    <!-- 导航组件  提供一组导航组件 实现web页面的栏目操作 -->
    <br/>
    <!-- 基本导航标签页   nav-tabs 实现标签导航-->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
    </ul>

    <br/>
    <!--  nav-pills    胶囊式   -->
    <ul class="nav nav-pills">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
    </ul>

    <br/>
    <!-- nav-stacked   垂直胶囊式   -->
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
    </ul>

    <br/>
    <!-- nav-stacked   导航两端对齐  -->
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></li>
        <li class="dropdown">
            <!-- 带有下拉菜单的导航 -->
            <a href="#" data-toggle="dropdown">
                下拉菜单
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">首页</a></li>
                <li><a href="#">资讯</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </li>
    </ul>


    <br/>
    <br/>
    <br/>
    <!-- 导航条   navbar-fixed-top将导航固定在顶部 navbar-fixed-bottom  固定在底部  -->
    <!-- navbar-static-top 静态导航 和页面等宽的导航条  去掉了圆角 -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">标题</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">资讯</a></li>
                <li class="disabled"><a href="#">产品</a></li>
                <li><a href="#">关于首页</a></li>
            </ul>
            <!-- 导航中使用表单 navbar-right 对齐方式 -->
            <form action="" class="navbar-form navbar-right">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button class="btn btn-default">提交</button>
                    </div>
                </div>
            </form>
            <!-- 导航中使用按钮    navber-right对齐方式 --> 
            <div class="btn btn-default navbar-btn navber-right">按钮</div> 
            <!-- 导航中使用一段文本 非导航链接  一般需要直入文本区域内 -->
            <p class="navbar-text">我是一段文本<a href="#" class="navbar-link">非导航链接</a></p>
        </div>
    </nav>
           
   
        

    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
</body>
</html>